import {useState, useImperativeHandle,forwardRef} from 'react';

// 子组件不同的是需要  forwardRef 包裹一层 进行构造

export default forwardRef((props,ref) => {

  const [date,setDate] =useState(new Date()) 

  // 这里就是就是暴露给父组件的方法 以及数据
  useImperativeHandle(ref, () => ({ // 第一个参数是 目标元素的ref引用 
      handleLog: (newVal) => {
         console.log(newVal)
         setDate(new Date())
      },
      date:date // 父组件想要什么,还得单独写一遍
  }));


  return (
      <div>
        <h2>现在是 { date.toLocaleTimeString()}.</h2>
       </div>
  )
}) 